<template>
	<view >	
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="button" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<!-- 户外导钓 -->
			<view v-if="current === 0">
				<view class="cell b-b">
					<text class="tit fill">活动名称</text>
					<input class="input" v-model="game.name" type="text" maxlength="15" placeholder="请输入活动名称" placeholder-class="placeholder">
				</view>
				<view class="cell b-b" @click="moveToLocation('location')">
					<text class="tit fill">钓鱼区域</text>
					<text class="mix-icon icon-dizhi"></text>
						<input class="input" v-model="location" name="location"  disabled="false" placeholder="请选择定位" />
				</view>
				<view class="cell b-b" @click="onShowDatePicker('startTime')">
					<text class="tit fill">出发时间</text>
					<input class="input" v-model="game.startTime" disabled="false" placeholder="请点选出发时间"  ></input>
				</view>
				<mx-date-picker :show="showPicker" type="datetime" :value="value" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
				
				<view class="cell b-b">
					<text class="tit fill">主要鱼种</text>
					<input class="input" v-model="game.fishingInfo" type="text" placeholder="请输入主要鱼种" placeholder-class="placeholder">
				</view>
				<view class="cell b-b ">
					<text class="tit fill">可带人数</text>
					<input class="input" v-model="game.maxNum" type="number" maxlength="20" placeholder-class="placeholder">
					<text class="fill ">人</text>
				</view>
				<view class="cell b-b ">
					<text class="tit fill">导钓费用</text>
					<input class="input" v-model="game.joinPrice" type="number" maxlength="20"  placeholder-class="placeholder">
					<text class="fill ">元/人</text>
				</view>
				<view class="cell b-b ">
					<text class="tit fill">联系电话</text>
					<input class="input" v-model="game.phone" type="text" maxlength="20" placeholder-class="placeholder">
				</view>
				<view class="cell">
					<text class="tit fill">活动说明</text>
				</view>
				<view class="cell b-b">
					<textarea type="text" v-model="game.description" maxlength="150"  placeholder="请输入活动说明" placeholder-style="color:#999" />
				</view>
			</view>
			<!-- 登礁海钓 -->
			<view v-if="current === 1">
				<view class="cell b-b">
					<text class="tit fill">活动名称</text>
					<input class="input" v-model="game.name" type="text" maxlength="15" placeholder="请输入活动名称" placeholder-class="placeholder">
				</view>
				<view class="cell b-b" @click="moveToLocation('location')">
					<text class="tit fill">目标岛屿</text>
					<text class="mix-icon icon-dizhi"></text>
						<input class="input" v-model="location" name="location"  disabled="false" placeholder="请选择定位" />
				</view>
				<view class="cell b-b ">
					<text class="tit fill">限报人数</text>
					<input class="input" v-model="game.maxNum" type="number" maxlength="20" placeholder-class="placeholder">
					<text class="fill ">人</text>
				</view>
				<view class="cell b-b">
					<text class="tit fill">主钓鱼种</text>
					<input class="input" v-model="game.fishingInfo" type="text" maxlength="20" placeholder="请输入主钓鱼种" placeholder-class="placeholder">
				</view>
				<view class="cell b-b ">
					<text class="tit fill">登礁费用</text>
					<input class="input" v-model="game.joinPrice" type="number" maxlength="20"  placeholder-class="placeholder">
					<text class="fill ">元/人</text>
				</view>
				<view class="cell b-b" @click="onShowDatePicker('startTime')">
					<text class="tit fill">集合时间</text>
					<input class="input" v-model="game.startTime" disabled="false" ></input>
				</view>
				<view class="cell b-b" @click="onShowDatePicker('endTime')">
					<text class="tit fill">返程时间</text>
					<input class="input" v-model="game.endTime" disabled="false" ></input>
				</view>
				<mx-date-picker :show="showPicker" type="datetime" :value="value" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
				<view class="cell b-b" @click="moveToLocation('startLocation')">
					<text class="tit fill">集合地点</text>
					<text class="mix-icon icon-dizhi"></text>
					<input class="input" v-model="startLocation" name="startLocation"  disabled="false" placeholder="请选择定位" />
				</view>
				<view class="cell b-b ">
					<text class="tit fill">联系电话</text>
					<input class="input" v-model="game.phone" type="text" maxlength="20" placeholder-class="placeholder">
				</view>
				<view class="cell">
					<text class="tit fill">活动介绍</text>
				</view>
				<view class="cell b-b">
					<textarea type="text" v-model="game.description" maxlength="150"  placeholder="请输入活动介绍" placeholder-style="color:#999" />
				</view>
			</view>
			<!-- 出海船钓 -->
			<view v-if="current === 2">
				<view class="cell b-b">
					<text class="tit fill">活动名称</text>
					<input class="input" v-model="game.name" type="text" maxlength="15" placeholder="请输入活动名称" placeholder-class="placeholder">
				</view>
				<view class="cell b-b">
					<text class="tit fill">钓船地点</text>
					<input class="input" v-model="location" name="location" placeholder="请输入钓船地点" />
				</view>
				<view class="cell b-b" @click="moveToLocation('startLocation')">
					<text class="tit fill">集合地点</text>
					<text class="mix-icon icon-dizhi"></text>
					<input class="input" v-model="startLocation" name="startLocation"  disabled="false" placeholder="请选择定位" />
				</view>
				<view class="cell b-b" @click="onShowDatePicker('startTime')">
					<text class="tit fill">集合时间</text>
					<input class="input" v-model="game.startTime" disabled="false" ></input>
				</view>
				<view class="cell b-b" @click="onShowDatePicker('endTime')">
					<text class="tit fill">返程时间</text>
					<input class="input" v-model="game.endTime" disabled="false" ></input>
				</view>
				<view class="cell b-b ">
					<text class="tit fill">限名人数</text>
					<input class="input" v-model="game.maxNum" type="number" maxlength="20" placeholder-class="placeholder">
					<text class="fill ">人</text>
				</view>
				<view class="cell b-b">
					<text class="tit fill">主钓鱼种</text>
					<input class="input" v-model="game.fishingInfo" type="text" maxlength="20" placeholder="请输入主钓鱼种" placeholder-class="placeholder">
				</view>
				<view class="cell b-b ">
					<text class="tit fill">活动费用</text>
					<input class="input" v-model="game.joinPrice" type="number" maxlength="20"  placeholder-class="placeholder">
					<text class="fill ">元/人</text>
				</view>
				<view class="cell b-b ">
					<text class="tit fill">联系电话</text>
					<input class="input" v-model="game.phone" type="text" maxlength="20" placeholder-class="placeholder">
				</view>
				<view class="cell">
					<text class="tit fill">活动介绍</text>
				</view>
				<view class="cell b-b">
					<textarea type="text" v-model="game.description" maxlength="150"  placeholder="请输入活动介绍" placeholder-style="color:#999" />
				</view>
			</view>
			<mix-button ref="confirmBtn" text="点击发布" marginTop="80rpx" @onConfirm="confirm"></mix-button>
		</view>
	</view>
</template>



<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	
	export default {
		components:{
			MxDatePicker
		},
		data() {
			return {
				items: ['户外导钓', '登礁海钓', '出海船钓'],
				current: 0,
				game: {
					recycle: false
				},
				showPicker: false,
				// datetime: 'datetime',
				key: '',
				value: '',
				
				location: '',
				startLocation: '',
			};
		},
		onLoad(){
			
			
		},
		methods:{
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			onShowDatePicker(key){//显示
				this.key = key;
				this.showPicker = true;
				this.value = this.game[key];
				// this.value = this[type];
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					this.game[this.key] = e.value;
					// //选择的值
					// console.log('value => '+ e.value);
					// //原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			moveToLocation: function(key) {
				let that = this;
				// this[key] = key;
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						// that.game.location = res.address;
						// that.location = res.address;
						// that.game[that.key] = res.address;
						that[key] = res.address;
						uni.setStorageSync('selAddress', res);
						// uni.navigateBack({
						// 	delta:1
						// })
					},
					fail:function(err){
						// uni.navigateBack({
						// 	delta:1
						// })
					}
				});
			},
			//是否回鱼
			changeRecycle(){
				// console.log(this.game.recycle)
				this.game.recycle = !this.game.recycle;
			},
			async confirm(){
				// if(!this.game.name){
				// 	this.$util.msg('请输入活动名称');
				// 	this.$refs.confirmBtn.stop();
				// 	return;
				// }
				// if(!this.game.startTime){
				// 	this.$util.msg('请选择开赛时间');
				// 	this.$refs.confirmBtn.stop();
				// 	return;
				// }
				// if(!this.location){
				// 	this.$util.msg('请设置比赛地点');
				// 	this.$refs.confirmBtn.stop();
				// 	return;
				// }
				this.game.location = this.location;
				const data = this.game
				console.log("==submit data=="+JSON.stringify(data))
				// const res = await this.$request_mock('feedback', 'add', data);
				// this.$util.msg(res.msg);
				this.$util.msg("success");
				this.$refs.confirmBtn.stop();
				// if(res.status == 1){
					setTimeout(()=>{
						// uni.navigateBack();
						uni.switchTab({
							url: '/pages/tabbar/home'
						})
					}, 1000)
				// }
			},
		},
	}
</script>
 
<style scoped lang="scss">
	.uni-padding-wrap {
		width: 750rpx;
		padding: 0px 30px;
	}
	.uni-common-mt {
		margin-top: 10px;
	}
 

	.app{
		padding-top: 16rpx;
		justify-content: flex-end;
	}
	.cell{
		display: flex;
		align-items: center;
		min-height: 110rpx;
		padding: 0 40rpx;
		
		&:first-child{
			margin-bottom: 10rpx;
		}
		&:after{
			left: 40rpx;
			right: 40rpx;
			border-color: #d8d8d8;
		}
		.tit{
			font-size: 30rpx;
			color: #333;
		}
		.avatar-wrap{
			width: 120rpx;
			height: 120rpx;
			position: relative;
			border-radius: 100rpx;
			overflow: hidden;
			
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}
			.progress{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				box-shadow: rgba(0,0,0,.6) 0px 0px 0px 2005px;
				border-radius: 100rpx;
				transition: .5s;
				opacity: 0;
				
				&.no-transtion{
					transition: 0s;
				}
				&.show{
					opacity: 1;
				}
			}
		}
		.input{
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
			// background-color: #F7F7F7;
			
		}
		switch{
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
		.tip{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
		.checkbox{
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;
			
			.mix-icon{
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}
			.icon-xuanzhong{
				color: $base-color;
			}
		}
	}
</style>

